<template>

  <el-card>

    <el-row>

      <el-col :span="12">
        <el-table
          :data="calendar.selectedPlan"
          border
          :header-cell-style="{'text-align':'center', }"
          max-height="620px"
          height="620px"
          style="width: 100%">

          <el-table-column label="当天的任务（不显示提前任务）">
            <el-table-column
              :show-overflow-tooltip="false"
              prop="name"
              label="计划名称"
            >
            </el-table-column>

            <el-table-column
              prop="type"
              label="计划类型"
            >
              <template slot-scope="scope">
                <el-tag type="warning" size="mini" v-if="scope.row.type === 10">固定任务</el-tag>
                <el-tag type="warning" size="mini" v-else-if="scope.row.type === 11">固定任务(精确到秒)</el-tag>
                <el-tag type="success" size="mini" v-else-if="scope.row.type === 20">循环任务(年)</el-tag>
                <el-tag type="success" size="mini" v-else-if="scope.row.type === 21">循环任务(月)</el-tag>
                <el-tag type="success" size="mini" v-else-if="scope.row.type === 22">循环任务(天)</el-tag>
                <el-tag type="success" size="mini" v-else-if="scope.row.type === 23">循循环任务(小时)</el-tag>
                <el-tag type="info" size="mini" v-else >-</el-tag>
              </template>
            </el-table-column>

            <el-table-column
              prop="cycle"
              label="周期"
            >
              <template slot-scope="scope">
                <el-tag size="mini" v-if="scope.row.type === 10">{{scope.row.cycle}} / 次</el-tag>
                <el-tag size="mini" v-else-if="scope.row.type === 11">{{scope.row.cycle}} / 次</el-tag>
                <el-tag size="mini" v-else-if="scope.row.type === 20">{{scope.row.cycle}} 年 / 次</el-tag>
                <el-tag size="mini" v-else-if="scope.row.type === 21">{{scope.row.cycle}} 月 / 次</el-tag>
                <el-tag size="mini" v-else-if="scope.row.type === 22">{{scope.row.cycle}} 天 / 次</el-tag>
                <el-tag size="mini" v-else-if="scope.row.type === 23">{{scope.row.cycle}} 小时 / 次</el-tag>
                <el-tag size="mini" v-else >-</el-tag>
              </template>
            </el-table-column>

            <el-table-column
              prop="importance"
              label="重要性"
            >
              <template slot-scope="scope">
                <el-tag type="danger" size="mini" v-if="scope.row.importance === 0">核心</el-tag>
                <el-tag type="warning" size="mini" v-else-if="scope.row.importance === 1">重要紧急</el-tag>
                <el-tag size="mini" v-else-if="scope.row.importance === 2">不重要但紧急</el-tag>
                <el-tag size="mini" v-else-if="scope.row.importance === 3">重要但不紧急</el-tag>
                <el-tag type="info" size="mini" v-else >不重要不紧急</el-tag>
              </template>
            </el-table-column>

            <el-table-column
              :show-overflow-tooltip="false"
              prop="details"
              label="详情"
            >
            </el-table-column>


            <el-table-column
              prop="classify"
              label="分类"
            >
              <template slot-scope="scope">
                <el-tag type="danger" size="mini" v-if="scope.row.classify === 1">个人</el-tag>
                <el-tag type="warning" size="mini" v-else-if="scope.row.classify === 2">家庭</el-tag>
                <el-tag size="mini" v-else-if="scope.row.classify === 3">工作</el-tag>
                <el-tag type="info" size="mini" v-else >-</el-tag>
              </template>
            </el-table-column>

            <!--<el-table-column-->
            <!--  fixed="right"-->
            <!--  label="操作"-->
            <!--  width="180">-->
            <!--  <template slot-scope="scope">-->
            <!--    <el-button @click="toOpenMusicDetailed(scope.row)" type="text" size="small"><i class="el-icon-view"></i>查看</el-button>-->
            <!--    <el-button @click="openUpdMusic(scope.row)" type="text" size="small"><i class="el-icon-edit"></i>编辑</el-button>-->
            <!--    <el-button @click="delMusicByIdTips(scope.row)" type="text" size="small"><i class="el-icon-delete"></i>删除</el-button>-->
            <!--  </template>-->
            <!--</el-table-column>-->
          </el-table-column>


        </el-table>
      </el-col>

      <!--左1-->
      <!--日历标记最近30天的任务-->
      <el-col :span="12">

        <el-calendar :range="[this.calendar.rangeStart, this.calendar.rangeEnd]">
          <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
          <template
            slot="dateCell"
            slot-scope="{date, data}">
            <div>
              <p :class="data.isSelected ? 'is-selected' : ''">
                <!--{{data.day}}-->
                {{ data.day.split('-').slice(1).join('-') }} {{ data.isSelected ? '✔️' : ''}}
              </p>
              <div v-for="item of calendar.taskOfDayList" :key="item.time">
                <span v-if="(item.timeStr === data.day) && (item.planList != null) && (item.planList.length > 0)">
                  <p @click="switchSelectedPlan(item.planList)">
                    <el-link type="primary" style="font-size: 12px">
                      待办 <span style="color: red">{{item.planList.length}}</span> 件
                    </el-link>
                  </p>
                </span>
                <!--{{item.timeStr}}-->
              </div>
            </div>
          </template>
        </el-calendar>

      </el-col>


    </el-row>

  </el-card>

</template>

<script>

  import http from '@/utils/http'

  export default {
    // 计划日历
    name: "PlanningCalendar",
    data(){
      return {
        // 日历
        calendar: {
          // 全部每天的任务
          taskOfDayList: [],
          // 范围时间
          rangeStart: '2023-01-01',
          // 结束时间
          rangeEnd: '2023-01-30',
          // 选中的任务
          selectedPlan: [],
        },
      }
    },
    methods: {
      /**
       * 切换当天的任务
       * @param planList 当天有哪些任务
       */
      switchSelectedPlan(planList){
        this.calendar.selectedPlan = planList
      },
      /**
       * 获取最近30天（5天）要办的任务-不考虑提前提醒的情况
       */
      getCalendarTask(){
        http.post("/plan/getCalendarTask", {}).then(response => {
          let res = response.data;
          if (res.status === 'error'){
            // 401是token过期跳转的
            if (res.code !== 401){
              this.$message.error(res.msg);
            }
            return
          }

          this.calendar.taskOfDayList = res.data.taskOfDayList
          this.calendar.rangeStart = res.data.startTime
          this.calendar.rangeEnd = res.data.endTime
          // this.calendar.rangeStart = this.calendar.taskOfDayList[0].timeStr
          // 数组最后一位
          // this.calendar.rangeEnd = this.calendar.taskOfDayList.at(-1).timeStr

          // 选中第一个
          if (this.calendar.taskOfDayList){
            this.switchSelectedPlan(this.calendar.taskOfDayList[0].planList)
          }

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
    },
    mounted(){
      this.getCalendarTask()
    }
  }
</script>

<style scoped>

  .is-selected {
    /*color: #1989FA;*/
    color: red;
  }

</style>
